import React,{useState} from 'react'

function Index() {
    const arr = [
        {
            id:1,
            name:"根茎类"
        },{
            id:2,
            name:"瓜类"
        },{
            id:3,
            name:"茄果类"
        },{
            id:4,
            name:"叶菜类"
        },{
            id:5,
            name:"花菜类"
        },{
            id:6,
            name:"鲜豆类"
        },{
            id:7,
            name:"菌类"
        },{
            id:8,
            name:"其他类"
        }
    ]
    const [leftNav,setLeftNav] = useState(arr)
    return (
        <div className="type">
            <header className="top">
                <div>
                    <span className="iconfont icon-sousuo"></span>
                    <input type="text" placeholder="搜你想搜的" />
                </div>
            </header>
            <main className="middle">
                <div className="left-nav">
                    {
                        leftNav.map((item,index)=>{
                            return (
                                <div className="item" key={index}>
                                    {item.name}
                                </div>
                            )
                        })
                    }
                </div>
                <div className="right-content">

                </div>
            </main>
        </div>
    )
}

export default Index
